<template>
  <div>
    <a-row>
      <a-col span="16">
        <a-input
          size="large"
          v-model="scanCode"
          allow-clear
          ref="inputValue"
          placeholder="扫描件码"
          @keyup.native="concludeData"
          @change="
            () => {
              this.getScanCode();
            }
          "
      /></a-col>
      <a-col span="8" style="padding: 0 10px">
        <a-button size="large" type="primary" @click="onScanUpcKeyUp"
          >重新扫描</a-button
        >
      </a-col>
    </a-row>
    <a-row style="margin-top: 15px">
      <a-col span="24">
        <a-input
          size="large"
          placeholder="跳过原因"
          v-model="returnReason"
          allow-clear
          @blur="onScanUpcKeyUp2"
          @change="
            () => {
              this.getReturnReason();
              this.forcedConfirmReason = '';
            }
          "
        ></a-input
      ></a-col>
    </a-row>
    <a-row style="margin-top: 15px">
      <a-col span="24">
        <a-input
          size="large"
          v-model="forcedConfirmReason"
          allow-clear
          placeholder="强制确认原因"
          @change="
            () => {
              this.getForcedConfirmReason();
              this.returnReason = '';
            }
          "
        ></a-input
      ></a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      scanCode: "",
      returnReason: "",
      forcedConfirmReason: "",
    };
  },
  props: {
    keyVisible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    Visible() {
      console.log("Visible111", this.keyVisible);
      return this.keyVisible;
    },
  },
  watch: {
    // Visible(newVal, oldVal) {
    //   this.scanCode = "";
    //   console.log("Visible222", newVal, oldVal);
    //   if (newVal) {
    //     this.$nextTick(() => {
    //       this.$refs.inputValue.focus(); //聚焦
    //     });
    //   }
    // },
    keyVisible(newVal, oldVal) {
      this.scanCode = "";
      console.log("Visible222", newVal, oldVal);
      if (newVal) {
        this.returnReason = '';
        this.forcedConfirmReason = '';
        this.$nextTick(() => {
          this.$refs.inputValue.focus(); //聚焦
        });
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.inputValue.focus(); //聚焦
    });
  },
  methods: {
    // 重新扫描
    onScanUpcKeyUp() {
      this.scanCode = "";
      this.$nextTick(() => {
        this.$refs.inputValue.focus(); //聚焦
      });
    },
    onScanUpcKeyUp2() {
      this.$nextTick(() => {
        this.$refs.inputValue.focus(); //聚焦
      });
    },
    getReturnReason() {
      // console.log('ssss', this.returnReason);
      this.$emit("getReturnReason", this.returnReason);
    },
    getForcedConfirmReason() {
      // console.log('ssss', this.forcedConfirmReason);
      this.$emit("getForcedConfirmReason", this.forcedConfirmReason);
    },
    getScanCode() {
      this.$emit("getScanCode", this.scanCode);
    },
    concludeData(e) {
      this.$emit("concludeData", e);
    },
  },
};
</script>
